import { useReducer } from "react";

export default function Reducer() {
  const reducer = (state, action) => {
    switch (action.type) {
      case "add":
        return [...state, ...action.payload];
        break;
      case "clear":
        return [];
        break;
      default:
        return state;
        break;
    }
  };
  const [state, dispatch] = useReducer(reducer, ["惠妹"]);
  const [state1, dispatch1] = useReducer(
    reducer,
    "惠妹",
    (init) => "漂亮，" + init
  );
  return (
    <>
      <ul>
        {state.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <hr />
      <ul>
        <li>{state1}</li>
      </ul>
      <button
        onClick={() =>
          dispatch({ type: "add", payload: ["郝娅惠", "郝小姐", "娅姐"] })
        }
      >
        添加惠妹
      </button>
      <button onClick={() => dispatch({ type: "clear" })}> 清除</button>
    </>
  );
}
